<template>
  <div id="container"></div>
</template>

<script>
const AMap = window.AMap
export default {
  data () {
    return {
      map: null,
      cityPos: {},
      cityOpts:{
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      },
      cityBounds: {}
    }
  },

  methods:{
    initMap(){
      this.map = new AMap.Map('container', {
        center: [120.152575,29.066619],
        viewMode: '3D',
        showLabel: false,
        // label的层级，为0可以把文字信息隐藏掉
        // labelzIndex:0,
        pitch: 20,
        zoom: 8,
        zooms: [6,20],
        // 官方提供了一些样式；也可以使用自定义地图，对应的样式要在对应的个人账号上
        // mapStyle:'amap://styles/f89b25455601ffb6d0f221da351a9bac'
        mapStyle: 'amap://styles/darkblue'
      })
    },
    addMapOverlay () {
      const district = new AMap.DistrictSearch({
        subdistrict: 1,
        extensions: 'all',
        level: 'province'
      })
      district.search('浙江',(status,result) => {
        result.districtList[0].districtList.forEach(item => this.cityPos[item.name] = [item.center.lng, item.center.lat]);
        const bounds = result.districtList[0].boundaries
        //添加浙江省描边
        for(let i = 0; i < bounds.length; i++) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: '#00F0FF',
            strokeWeight: 4,
            isOutline: true,
            outlineColor: '#1c00ff',
            map: this.map
          })
        }
        // 添加高度面(非必须)
        const object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 })
        this.map.add(object3Dlayer)
        const wall = new AMap.Object3D.Wall({
          path: bounds,
          height: -50000,
          color: '#0088ffcc'
        })
        wall.transparent = true
        object3Dlayer.add(wall)

        const cityList = result.districtList[0].districtList
        for(let i = 0;i < cityList.length; i++) {
          // 添加文字
          const text = new AMap.Text({
            text: cityList[i].name.slice(0,3),
            anchor:'center', // 设置文本标记锚点
            style:{
              'padding': '4px',
              'margin-bottom': '1rem',
              'border-radius': '.25rem',
              'border':'1px solid #fff',
              'background-color': '#00000066',
              'text-align': 'center',
              'font-size': '14px',
              'color': '#fff'
            },
            zIndex: 10,
            extData: cityList[i].name,
            position: cityList[i].center
          });
          this.map.add(text)

        // 添加各市级描边
          this._addCityBoundary(cityList[i])
        }
      })
    },

    // 添加描边
    _addCityBoundary(item) {
      const district = new AMap.DistrictSearch(this.cityOpts)
      district.search(item.name, (status,result) => {
        const bounds = result.districtList[0].boundaries
        this.cityBounds[item.name] = bounds
        for(let i = 0; i < bounds.length; i++) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: '#eee',
            strokeWeight: 2,
            map: this.map
          })
        }
      })
    }
  },

  mounted () {
    this.initMap()
    this.addMapOverlay()
  }
}
</script>

<style>
  #container {
    width: 100%;
    height: 100%;
  }
</style>